<template>
    <div class="single-pie">
        <div class="title">
            {{ title }}
        </div>
        <div class="pie">
            <div class="chart">
                <Pie :data="dataInfo" :colors="colors" />
            </div>
            <div>
                <Item v-for="(item, index) in (list.slice(0, 4))" :key="index" :data="item" :color="colors[index]" />
            </div>
            <div>
                <Item v-for="(item, index) in (list.slice(4))" :key="index" :data="item" :color="colors[index + 3]" />
            </div>
        </div>
    </div>
</template>

<script lang="ts"  setup>
import { toRefs, computed } from 'vue';
import Pie from '../Pie.vue';
import Item from './Item.vue';
import { ListItem } from '../Ranking.vue';
// import { watch } from 'vue';
import { DataItem } from '../../onePage.module';

const props = defineProps<{
    title: string,
    list: ListItem[],
    data: DataItem[]
}>();
const { title, list } = toRefs(props);

const dataInfo = computed(() => {
    return list.value.map((item: DataItem) => ({ value: +item.value }));
});
const colors = ['#E60044', '#FC91AA', '#F79631', '#FFD397', '#FFE8D0', '#D2D2D2', '#EEEEEE'];
</script>

<style lang="scss" scoped>
.single-pie {
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 30px;
    width: 100%;

    .title {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #181819;
    }

    .pie {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        margin-top: 10px;

        .chart {
            margin-right: 16px;
            align-self: center;
            width: 64px;
        }

        & > div:not(.chart) {
            flex: 1;
            box-sizing: border-box;
            // max-width: 33.33%;
            // min-width: 33.33%;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>
